<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="common :: header"/>
<body>
<div class="page layout-row">
    <div class="card layout-left">
        <div class="card-header">
            部门列表
            <i class="layui-icon layui-icon-set" lay-href="/system/dept" lay-text="部门管理" lay-tips="管理部门" lay-offset="-15"></i>
        </div>
        <div class="card-body">
            <div id="tree"></div>
        </div>
    </div>
    <div class="card layout-center">
        <div class="card-header">
            <form id="search_form">
                <input type="hidden" id="search_deptId" name="deptId" value="">
                <input type="hidden" id="search_status" name="status" value="0">
                <input class="easyui-textbox" data-options="label:'姓名'" name="name" style="width:190px;">
                <input id="search_role" name="role" style="width:190px;">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-clear'" onclick="resetForm('search_form');">重置</a>
                <a href="#" class="easyui-linkbutton button-info" data-options="iconCls:'icon-search'" onclick="dm.search('table', 'search_form')">查询</a>
            </form>
        </div>
        <div class="card-body">
            <div id="table"></div>
            <div id="toolbar" style="display: none">
                <a shiro:hasPermission="system:user:add" href="#" onclick="add()" class="easyui-linkbutton"
                   data-options="iconCls:'icon-add',plain:true">增加</a>
                <a shiro:hasPermission="system:user:edit" href="#" onclick="edit()" class="easyui-linkbutton"
                   data-options="iconCls:'icon-edit',plain:true">修改</a>
                <a shiro:hasPermission="system:user:delete" href="#" onclick="remove()" class="easyui-linkbutton"
                   data-options="iconCls:'icon-remove',plain:true">删除</a>
                <a shiro:hasPermission="system:user:resetPwd" href="#" onclick="initPwd()" class="easyui-linkbutton"
                data-options="iconCls:'icon-set',plain:true">初始化密码</a>
                <input id="btnShowDisabled">
            </div>
        </div>
    </div>
</div>
<script th:inline="javascript">

    $(function() {
        $('#search_role').combobox({
            label: "角色",
            url: '/system/role/getRoles',
            valueField: 'roleId',
            textField: 'roleName',
            editable: false
        });

        $("#tree").tree({
            url: '/system/dept/tree',
            fit: true,
            checkbox: false,
            cache: false,
            onLoadSuccess: function (node, data) {
                if(data){
                    const node = $('#tree').tree('find', data[0].id);
                    $('#tree').tree('select', node.target);
                }
            },
            onSelect: function(node){
                $('#search_deptId').val(node.id);
                dm.search('table', 'search_form');
            }
        })

        $('#table').datagrid({
            url: '/system/user/list',
            queryParams: {status: 0},
            fit: true,
            fitColumns: true,
            nowrap: true,
            singleSelect: true,// 单选模式
            pagination: true,
            pageSize: 20, // 每一页多少条数据
            pageList: [ 10, 20, 30, 40, 50 ], // 可以选择的每页的大小的combobox
            idField: 'userId',
            sortName: 'userId',
            toolbar: '#toolbar',
            columns:[ [
                {field: 'ck', checkbox: true },
                {field: 'loginName', title: '账号', width: 100},
                {field: 'userName', title: '姓名', width: 100},
                {field: 'roleName', title: '角色', width: 240},
                {field: 'deptName', title: '部门', width: 150},
                {field: 'phone', title: '手机号码', width: 150},
                {field: 'sex', title: '性别', align:'center',width: 50, formatter: sexFormatter},
                {field: 'status',title: '状态',align:'center',sortable: true, width: 80,formatter: statusFormatter}
            ] ],
            onBeforeLoad: dm.notLoadOnFirstTime,
            onLoadSuccess: function () {
                $('.btn_edit').linkbutton({text:'修改',plain:true,iconCls:'icon-edit'});
                $('.btn_disable').linkbutton({text:'停用',plain:true,iconCls:'icon-remove'});
                $('.btn_enable').linkbutton({text:'启用',plain:true,iconCls:'icon-ok'});
            }
        });
    });

    function resetForm() {
        var checked = $('#btnShowDisabled').checkbox('isCheck');
        $("#search_form").form('clear');
        $('#search_status').val(checked ? '' : 0);
    }

    function add() {
        dm.openDialog('新增用户', '/system/user/add', 560, 480);
    }
    function edit() {
        dm.getRow('table',row => {
            dm.openDialog('修改用户','/system/user/edit/'+row.userId, 560, 520);
        })
    }

    function remove() {
        dm.getRow('table',function(row) {
            dm.confirm('确定要删除用户【'+row.loginName+'】？', function () {
                dm.post('/system/user/delete/' + row.userId, {}, function () {
                    dm.search('table');
                })
            })
        })
    }

    function initPwd() {
        dm.getRow('table',function(row) {
            dm.confirm('确定要初始化用户【'+row.loginName+'】的密码？', function () {
                dm.post('/system/user/resetPwd?userId=' + row.userId, {}, function () {
                    dm.search('table');
                })
            })
        })
    }

    $('#btnShowDisabled').checkbox({
        label:'显示停用',
        onChange:function (checked) {
            $('#search_status').val(checked ? '' : 0);
            dm.search('table', 'search_form');
        }
    });

</script>
</body>
</html>
